<template>
	<gracePage headerBG="#1CA376" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34 grace-white" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center grace-white">
					<text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">销售津贴</text>
				</view>
				<!-- 消息按钮 -->
				<view class="grace-header-icons"></view>
			</view>
		</view>
		<view slot="gBody">
			<view>
				<view class="" style="position:relative;">
					<view class="" style="position:relative;">
						<image src="/static/images/application_bg.png" class="width-full" mode="widthFix"></image>
						<!-- <text class="" style="position:absolute; left:0; bottom:0;">标题在图片上</text> -->
					</view>
					<view class="grace-center-view">
						<!-- <view class="grace-white grace-text text-center">最近一次津贴(元)</view> -->
						<view class="grace-h2 grace-white text-center">
							<text class="grace-h4">￥</text>
							<text>{{ userInfo.balance_no }}</text>
						</view>
						<!-- <view class="grace-white grace-text text-center">可提现津贴 ￥9000</view> -->
					</view>
				</view>
			</view>
			<view id="gBody">
				<view class="SegmentedControlIn"><graceSegmentedControl :items="cates" :current="current" @change="change" color="#000000" bgColor="#FFFFFF"></graceSegmentedControl></view>
				<divider></divider>
				<scroll-view scroll-y class="grace-list grace-margin-top" :style="{ height: scrollHeight + 'px' }">
					<view class="grace-list-items grace-body" v-for="(item, index) in logs" :key="index" >
						<view class="grace-list-body grace-border-b">
							<view class="grace-list-title">
								<text class="grace-list-title-text">销售津贴</text>
								<text class="grace-list-title-desc" style="width: 440rpx;">￥{{ item.balance_no }}</text>
							</view>
							<view class="grace-list-title">
								<text class="grace-list-title-text">变更原因</text>
								<text class="grace-list-title-desc" style="width: 440rpx;">{{ item.change_desc }}</text>
							</view>
							
							<view class="grace-list-body-desc">{{ item.change_time }}</view>
						</view>
					</view>
					<graceLoading :loadingType="loadingType"></graceLoading>
				</scroll-view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="grace-footer" slot="gFooter">
			<view class="pb-4 mx-3"><button type="primary" class="grace-button" @click="toNavigateTo('/pages/homeBox/applicationPay/applicationPay')">提现</button></view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceLoading from '@/graceUI/components/graceLoading.vue';
import graceSegmentedControl from '@/graceUI/components/graceSegmentedControl.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			oneGoStatus: true,
			cates: ['VIP会员', '自源顾问'],
			current: 0,
			scrollHeight: 500,
			logs: [],
			finType:"balance_no",
			finTypeNum:6,
			page:1,
			loadingType: 3, // 加载更多的loading,
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onReady: function() {
		setTimeout(() => {
			uni.createSelectorQuery()
				.select('#gBody')
				.fields({ size: true }, res => {
					this.scrollHeight = res.height - ((uni.upx2px(180) * 2) + 40);
				})
				.exec();
		}, 1000);
	},
	onLoad: function() {
		this.__init();
	},
	methods: {
		__init(){
			console.log(this.userInfo)
			this.loadingType = 1;
			let options = {
				act:"finance_list",
				page:this.page,
				number:10,
				fin_type: this.finType,
				user_rank:this.finTypeNum
			}
			this.$HTTP.post('/api/api.php', options, { token: true }).then(data=>{
				if (data.error) {
					if (this.page == 1) {
						this.loadingType = 4;
					} else {
						this.loadingType = 2;
					}
					return;
				}
				console.log('data',data)
				this.logs = this.logs.concat(data.list);
				this.loadingType = 3;
				this.page = this.page + 1;
				
			})
		},
		toNavigateTo(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		onPageScroll: function(e) {
			console.log(e)
		},
		change: function(e) {
			console.log(e)
			this.current = e;
			this.logs = [];
			this.loadingType = 3;
			this.page = 1;
			if(e == 0){
				this.finTypeNum = 6;
			}else{
				this.finTypeNum = 7;
			}
			this.__init();
		}
	},
	components: { gracePage, graceSegmentedControl,graceLoading}
};
</script>
<style scoped>
.grace-footer {
	box-shadow: 1px 1px 6px #ffffff;
}

</style>
